<template>
  <div id="videolist">
    <div>
      <el-button @click="addTit">新增</el-button>
      <el-button @click="setSttus('disabled')">屏蔽</el-button>
      <el-button @click="setSttus('enabled')">取消屏蔽</el-button>
    </div>
    <msg-list :tableData="tableData" :title="title" :btntype="btntype" :pagesall="parseInt(pagesall)" :pages="parseInt(page)" @getselect="getselect" @changepage="changepage1" @getid="getid1"></msg-list>
    <div class="layer" v-show="delshow">
      <div class="mask" @click="delshow = false"></div>
      <div class="content">
        <span class="close" @click="delshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title" v-show="type">删除的理由</p>
        <p class="title" v-show="!type">屏蔽的理由</p>
        <div class="doit">
          <div class="one">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 20}"
              v-model="deletes.reason">
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="layer" v-show="seecontent">
      <div class="mask" @click="seecontent = false"></div>
      <div class="content" v-if="isVideo">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">{{addtitle}}视频</p>
        <div style="margin-top: 20px;">
          <span style="float: left;margin-right: 15px;margin-left: 15px;">标题:</span>
          <span style="float: left;display: inline-block;width: 80%"><el-input v-model="input2" placeholder="请输入标题" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div style="margin-top: 20px;">
          <span style="float: left;margin-right: 15px;margin-left: 15px;">简介:</span>
          <span style="float: left;display: inline-block;width: 80%">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                v-model="videocontent">
              </el-input></span>
        </div>
        <div class="clear"></div>
        <div style="margin-top: 20px;">
          <span style="float: left;margin-right: 15px;margin-left: 15px;">期数:</span>
          <span style="float: left;display: inline-block;width: 80%"><el-input v-model="stage" placeholder="请输入期数" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div style="margin-top: 20px;">
          <span style="float: left;margin-right: 15px;">视频ID:</span>
          <span style="float: left;display: inline-block;width: 80%"><el-input v-model="qvid" placeholder="请输入视频ID" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div class="main-box" style="margin-left: 10px;">
          <span>状态</span>
          <el-radio-group v-model="radio3">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="0">不可用</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box" style="margin-top: 50px;margin-bottom: 50px;">
          <span style="margin-left: 30%;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
      <div v-else>
        <div class="content">
          <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
          <video :src="vurl" controls="controls" style="width: 50%" autoplay="autoplay"></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/content'

export default {
  components: {
    MsgList,
    editor: editor},
  name: 'questions',
  data () {
    return {
      page: 1,
      addtitle: '新增',
      isVideo: true,
      radio3: 1,
      input2: '',
      input3: '',
      status: '',
      videocontent: '',
      stage: '',
      qvid: '',
      searchmsg: '',
      btntype: ['预览', '修改', '删除'],
      pagesall: 1,
      content: {},
      type: true,
      deletes: {
        ids: [],
        reason: ''
      },
      delshow: false,
      searchshow: false,
      seecontent: false,
      title: [
        {
          prop: 'id',
          label: '视频id'
        },
        {
          prop: 'videotopic_id',
          label: '视频包id'
        },
        {
          prop: 'title',
          label: '视频标题'
        },
        {
          prop: 'stage',
          label: '期数'
        },
        {
          prop: 'status',
          label: '是否可用'
        },
        {
          prop: 'views',
          label: '观看人数'
        },
        {
          prop: 'add_time',
          label: '添加日期'
        },
        {
          prop: 'qvid',
          label: '正式视频id'
        },
        {
          prop: 'qvid_view',
          label: '预览视频id'
        }
      ],
      tableData: [],
      intro: [],
      tid: 0,
      vids: [],
      tcPlayer: '',
      qaid: '',
      vurl: ''
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      let that = this
      this.$g.ajax({
        path: 'Videos/index/' + that.$route.params.id,
        method: 'post',
        cbSuccess: function (data) {
          that.tableData = data.memo.list
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    addTit () {
      this.seecontent = true
      this.addtitle = '新增'
      this.input2 = ''
      this.input3 = ''
      this.isVideo = true
    },
    addTags () {
      let that = this
      if (this.addtitle === '新增') {
        this.isVideo = true
        let aaa = ''
        if (parseInt(this.radio3) === 0) {
          aaa = 'disabled'
        }
        if (parseInt(this.radio3) === 1) {
          aaa = 'enabled'
        }
        this.$g.ajax({
          path: 'videos/add',
          method: 'post',
          data: {
            videotopic_id: that.$route.params.id,
            title: that.input2,
            content: that.videocontent,
            stage: that.stage,
            status: aaa,
            qvid: that.qvid
          },
          cbSuccess: function (data) {
            that.$message.success('成功')
            that.seecontent = false
            that.videocontent = ''
            that.stage = ''
            that.qvid = ''
            that.input2 = ''
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            console.log(msg)
            if (msg === 'title_error') {
              msg = '标题名不能超过10个字'
            }
            if (msg === 'stage_error') {
              msg = '期数错误'
            }
            if (msg === 'qvid_error') {
              msg = '视频id错误'
            }
            that.$message.error(msg)
          }
        })
      }
      if (this.addtitle === '修改') {
        let aaa = ''
        if (parseInt(this.radio3) === 0) {
          aaa = 'disabled'
        }
        if (parseInt(this.radio3) === 1) {
          aaa = 'enabled'
        }
        this.$g.ajax({
          path: 'videos/edit/' + that.tid,
          method: 'post',
          data: {
            videotopic_id: that.qaid,
            title: that.input2,
            content: that.videocontent,
            stage: that.stage,
            status: aaa,
            qvid: that.qvid
          },
          cbSuccess: function (data) {
            that.$message.success('成功')
            that.seecontent = false
            that.videocontent = ''
            that.stage = ''
            that.qvid = ''
            that.input2 = ''
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            if (msg === 'title_error') {
              msg = '标题名不能超过10个字'
            }
            if (msg === 'stage_error') {
              msg = '期数错误'
            }
            if (msg === 'qvid_error') {
              msg = '视频id错误'
            }
            that.$message.error(msg)
          }
        })
      }
    },
    changepage1 (page) {
      this.page = page
      this.search()
    },
    setSttus (val) {
      if (this.deletes.ids.length < 1) {
        this.$message({
          type: 'error',
          message: '请选择需要操作的视频'
        })
      } else {
        let that = this
        let aaa = ''
        if (val === 'disabled') {
          aaa = '屏蔽'
        } else {
          aaa = '取消屏蔽'
        }
        this.$confirm('确定' + aaa + '视频吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$g.ajax({
            path: 'Videos/setStatus/' + val,
            method: 'post',
            data: {
              ids: that.deletes.ids
            },
            cbSuccess: function (data) {
              that.$message.success('成功')
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    delhot () {
      let that = this
      this.$confirm('确定删除视频吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'Videos/delete/' + that.tid,
          method: 'post',
          data: {},
          cbSuccess: function (data) {
            that.$message.success('成功')
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid1 (val) {
      console.log(val)
      if (val.btn === '修改') {
        this.isVideo = true
        this.seecontent = true
        this.addtitle = '修改'
        this.tid = val.val.id
        this.qaid = val.val.videotopic_id
        this.videocontent = val.val.content
        this.stage = val.val.stage
        this.qvid = val.val.qvid
        if (val.val.status === '不可用') {
          this.radio3 = 0
        }
        if (val.val.status === '可用') {
          this.radio3 = 1
        }
        this.input2 = val.val.title
      }
      if (val.btn === '删除') {
        this.tid = val.val.id
        this.delhot()
      }
      if (val.btn === '预览') {
        this.seecontent = true
        this.isVideo = false
        this.vurl = val.val.source_video_url
      }
    },
    getselect (vals) {
      console.log(vals)
      this.deletes.ids = []
      for (let i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #videolist {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .layer {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .content {
        position: relative;
        width: 40%;
        background: #fff;
        margin: 5% auto;
        z-index: 2;
        padding: 30px;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        .doit .one .el-input {
          width: 200px;
          margin-left: 20px;
        }
        .doit .one {
          margin-top: 20px;
          font-size: 14px;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          position: relative;
          left: -4px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
</style>
<style scoped>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
<style>
  #videolist .el-textarea__inner {
    resize: none;
  }
</style>
